import React, { Component } from 'react'
import { Modal, Text, TouchableHighlight, View, TouchableOpacity, StyleSheet,Platform,ScrollView  } from 'react-native'
import { connect } from 'react-redux'
import { ThemeFlags } from '../../js/expand/theme/index'
import { changeModalStatus, changeThemeStatus } from '../../store/theme/actionCreators'
import ThemeDao from '../../js/expand/theme/ThemeDao'

class CustomTheme extends Component {
  constructor(props) {
    super(props);
    this.themeDao = new ThemeDao()
  }
  onSelectTheme(themeKey) {
    this.props.onClose();
    this.themeDao.saveData(ThemeFlags[themeKey])
    this.props.changeTheme(ThemeFlags[themeKey])
  }

  getThemeItem(themeKey) {
    return <TouchableOpacity style={{flex: 1}} underlayColor='white' onPress={()=>this.onSelectTheme(themeKey)}>
        <View style={[{backgroundColor: ThemeFlags[themeKey]}, styles.themeItem]}>
          <Text style={styles.themeText}>{themeKey}</Text>
        </View>
    </TouchableOpacity>
  }
  showTheme() {
    var views=[];
    for(let i=0, keys = Object.keys(ThemeFlags), l = keys.length;i<l; i+=3) {
      const key1 = keys[i], key2 = keys[i+1], key3 = keys[i+2];
      views.push(<View key={i} style={{flexDirection: 'row'}}>
        {this.getThemeItem(key1)}
        {this.getThemeItem(key2)}
        {this.getThemeItem(key3)}
      </View>)
    }
    return views;
  }

  render() {
    return (
      <View style={{ marginTop: 22 }}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.props.showModal}
          onRequestClose={() => {
            this.props.onClose()
          }}
        >
          <View style={styles.modalContainer}>
            <ScrollView>
                {this.showTheme()}
            </ScrollView>
          </View>
        </Modal>
      </View> 
    )
  }
}

const styles = StyleSheet.create({
  themeItem: {
      flex:1,
      height: 120,
      margin:3,
      padding:3,
      borderRadius:2,
      alignItems: 'center',
      justifyContent: 'center',
  },
  modalContainer: {
      flex:1,
      margin:10,
      marginTop:Platform.OS==='ios'?20:10,
      backgroundColor:'white',
      borderRadius:3,
      shadowColor:'gray',
      shadowOffset:{width:2,height:2},
      shadowOpacity:0.5,
      shadowRadius:2,
      padding:3
  },
  themeText:{
      color:'white',
      fontWeight:'500',
      fontSize:16
  }
})

const mapState = (state) => ({

})

const mapDispatch = (dispatch) => ({
  onClose() {
    dispatch(changeModalStatus(false))
  },
  changeTheme(theme) {
    dispatch(changeThemeStatus(theme))
  }
});

export default connect(mapState, mapDispatch )(CustomTheme)